<!--白名单渠道列表-->
<template>
  <div>
    <!--     搜索条件-->
    <SearchForm @search="getTableData" @reset="resetData">
      <el-col :span="8" v-show="$permiss[461]">
        <el-form-item :label="$t('所属租户')" prop="adminUserId">
          <el-select style="width: 100%" v-model="page.adminUserId" clearable>
            <el-option v-for="item in tenantList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <!-- 条件第二行 -->
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('渠道')" v-show="$permiss[460]">
          <!--1业务拉黑，2导入，3灰转黑-->
          <el-select style="width: 100%" v-model="page.channelName" clearable>
            <el-option v-for="(channel, index) in channelList" :key="index" :value="channel"
                       :label="channel">

            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <!-- 条件第二行 -->
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('最近交易日期')" label-width="110px">
          <el-date-picker
              v-model="page.timeValue"
              style="width: 100%"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="~"
              unlink-panels
              :start-placeholder="$t('开始日期')"
              :end-placeholder="$t('结束日期')">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </SearchForm>

    <el-card shadow="never" style="margin-top: 10px">
      <div style="text-align: right; margin-bottom: 10px">
        <el-button type="primary" @click="addChannel" v-show="$permiss[462]">{{ $t('新增') }}</el-button>
      </div>
      <!--表单数据-->
      <Table row-key="id" :table-data="tableData" :page="page" :tableColumn="tableColumn"
             :loading="loading"
             @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
        <template slot-scope="scope" slot="handle">
          <el-button type="text" @click="isAddRecent(scope.row)" v-if="$permiss[464]">{{ $t('新增交易') }}</el-button>
          <el-button type="text" @click="details(scope.row)" v-if="$permiss[463]">{{ $t('明细') }}</el-button>
        </template>
      </Table>
    </el-card>

    <!--新增渠道-->
    <Dialog :visible.sync="visible.isShow" :title="visible.title" :destroyClose="true"
            @confirm="visibleChannelConfirm" @cancel="visible.isShow = false" @close="visibleClear">

      <el-form label-width="100px" :model="form" ref="form" :rules="rulesForm">
        <el-form-item :label="$t('渠道名称') + ':'" prop="channelName">
          <el-input v-model="form.channelName"></el-input>
        </el-form-item>
        <el-form-item :label="$t('备注') + ':'" prop="remarks">
          <el-input type="textarea" :rows="4" v-model="form.remarks"></el-input>
        </el-form-item>
      </el-form>
    </Dialog>

    <Details :visible.sync="detailsVisible" :item="detailsModel" :title="detailsModel.channelName"></Details>
    <AddTrade :trade-visible.sync="addTradeVisible" :trade-data="addTradeModel"></AddTrade>
  </div>
</template>

<script>
import Details from '../compoents/index'
import AddTrade from "@/views/channel/compoents/addTrade";
import eventBus from "@/utils/eventBus";
import {fetchChannelList, selectChannelName, addChannel, isAddRecent} from '@/api/channel'
import {selectTenant} from "@/api/system";
import {dateFormatSection} from "@/utils/tools";

export default {
  name: 'whileChannelList',
  data() {
    return {
      page: {
        channelName: '',
        timeValue: null,
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      loading: false,
      channelList: [],//下拉渠道列表
      tableData: [],
      tableColumn: [
        {label: this.$t('渠道名称'), prop: 'channelName', align: "center"},
        {label: this.$t('创建人'), prop: 'inputName', align: 'center'},
        {label: this.$t('新建时间'), prop: 'creationTime', align: "center", minWidth: 150},
        {label: this.$t('最近交易时间'), prop: 'recentTime', align: "center", minWidth: 150},
        {label: this.$t('备注'), prop: 'remarks', align: "center"},
        {label: this.$t('所属租户'), prop: 'adminUserName', align: "center", isHide: !this.$permiss[461]},
        {
          label: this.$t('操作'),
          slot: 'handle',
          align: "center",
          width: 150,
          isHide: !this.$permiss[464] && !this.$permiss[463]
        },
      ],
      //新增渠道
      visible: {
        isShow: false,
        title: '',
      },
      form: {},
      rulesForm: {
        channelName: [
          {required: true, message: this.$t('渠道名称不能为空')},
        ]
      },
      detailsVisible: false,
      detailsModel: {},
      addTradeVisible: false,
      addTradeModel: {},
      tenantList: []
    }
  },
  components: {
    Details,
    AddTrade,
  },
  async mounted() {
    this.getTableData();
    this.getChannels();
    eventBus.$on('addTradeSuccessEvent', () => {
      this.getTableData()
    })
    selectTenant().then(res => {
      this.tenantList = res.data
    })
  },
  methods: {
    //白渠道列表
    async getTableData() {
      const [startTime, endTime] = dateFormatSection(this.page.timeValue || []);
      const params = {
        ...this.page,
        startTime, endTime
      }
      delete params.timeValue;
      this.loading = true
      const res = await fetchChannelList(params);
      if (res.code === 1) {
        const {list, total} = res.data;
        this.tableData = list;
        this.page = {
          ...this.page,
          total: total,
        }
        this.loading = false
      } else {
        this.loading = false
      }
    },
    //获取下拉渠道列表
    async getChannels() {
      const res = await selectChannelName();
      if (res.code === 1) {
        this.channelList = res.data
      }
    },
    //重置
    resetData() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      };
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getTableData()
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getTableData()
    },

    //新增渠道
    addChannel() {
      this.visible = {
        isShow: true,
        title: this.$t('新增渠道'),
      }
    },
    visibleClear() {
      this.form = {
        channelName: '',
        remarks: ''
      }
      this.$refs.form.resetFields()
    },
    visibleChannelConfirm() {
      this.$refs.form.validate(async v => {
        if (v) {
          let message = this.$t('新增成功')
          const res = await addChannel(this.form)
          if (res.code === 1) {
            this.$message.success(message)
            this.visibleClear()
            this.visible.isShow = false
            this.getChannels()
            this.getTableData()
          }
        }
      })
    },
    //明细
    details(row) {
      this.detailsModel = {...row};
      this.detailsVisible = true
    },
    //是否能交易
    async isAddRecent(data) {
      //whitelist/isAddRecent
      // const params = Object.assign({}, this.page)
      let model = {}
      model.channelName = data.channelName;
      model.adminUserId = data.adminUserId
      const res = await isAddRecent(model);
      if (res.code === 1) {
        this.addTrade(data)
      }
    },
    //新增交易
    addTrade(row) {
      this.addTradeModel = row
      this.addTradeVisible = true
    },
  },
  beforeDestroy() {
    eventBus.$off('addTradeSuccessEvent')
  }
}
</script>

<style scoped>

</style>
